import React, { Component } from 'react'
import '../../asset/css/cate.css'
import { cateRequest, goodsRequest } from "../../request/cate_request"
import Header from "./component/DefaultHeader"
export default class Cate extends Component {
    state = {
        cate_list: [],
        now_id: 1,
        goods_list: [],
        lable: "时令水果"
    }
    UNSAFE_componentWillMount() {
        cateRequest().then(res => {
            this.setState({ cate_list: res.list })
            var obj = res.list[0]
            this.changeList(obj.id, obj.catename)
        })
    }
    componentWillUnmount(){
        this.setState=()=>false//重置了setstate
    }
    changeList(id, catename) {
        this.setState({ now_id: id, lable: catename })
        goodsRequest(id).then(res => {
            this.setState({ goods_list: res.list })
        })
    }
    render() {
        const { cate_list, now_id, goods_list, lable } = this.state
        const {history}=this.props
        return (
            <div>
                <Header title="商品分类"/>
                <div className="content">
                    <ul className="left">
                        {
                            cate_list.map(item => (
                                <li className={item.id === now_id ? "active" : ""} key={item.id} onClick={() => this.changeList(item.id, item.catename)}>{item.catename}</li>
                            ))
                        }
                    </ul>
                    <ul className="right">
                        <li className="section">
                            <h3>{lable}<span style={{float:"right",fontSize:12,fontWeight:"normal",color:"orange"}} onClick={()=>history.push("/goodlist/?type_id="+now_id+"&type_name="+lable)}>查看更多&gt;&gt;</span></h3>
                            <ul>
                                {
                                    goods_list.map(item => (
                                        <li key={item.id} onClick={()=>history.push("/gooddetail/?id="+item.id)}>
                                            <img src={this.$adress+item.img} alt="" />
                                            <p>{item.goodsname}</p>
                                        </li>
                                    ))
                                }
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        )
    }
}
